<template>
    <InterceptContainer :need-login="true">
        <img class="header-bg" src="@/assets/images/push_bg.png" alt="">
        <view class="push-form">
            <view class="push-form_item">
                <text class="push-form_item__name">许愿类型</text>
                <view class="push-form_item__box">
                    <picker @change="bindPickerChange" :value="index" :range="classes.map(value => (value.name))" :range-key="name">
                        <view class="uni-input">
                            {{ classes.length > 0 ?  classes[index].name : '' }}
                        </view>
                    </picker>
                    <img class="push-form_item__box-down" src="@/assets/images/down.png" alt="">

                </view>
            </view>
            <view class="push-form_item">
                <text class="push-form_item__name">许愿标题</text>
                <input @blur="showbar()" @focus="hidebar()" v-model="wishInput.inputNameContent" class="uni-input push-form_item__box" placeholder="请填写许愿标题"
                    placeholder-style="color:#CFCFCF" />
            </view>

            <view class="push-form_item">
                <text class="push-form_item__name">许愿金额</text>
                <input @blur="showbar()" @focus="hidebar()" type="number" v-model="wishInput.inputMoneyContent" class="uni-input push-form_item__box"
                    placeholder="请填写发起金额，最高10000元" placeholder-style="color:#CFCFCF" />
            </view>

            <view class="push-form_item">
                <text class="push-form_item__name">许愿详情</text>
                <textarea @blur="showbar()" @focus="hidebar()" v-model="wishInput.inputReasonContent" class="uni-input push-form_item__box area"
                    style="height: 150rpx;    width: auto;" placeholder="请填写您的愿望和求助事由..."
                    placeholder-style="color:#CFCFCF" />
            </view>

            <view class="push-form_item">
                <text class="push-form_item__name">发起人的愿望图片</text><text class="push-form_item__des">产品图为了让你的愿望更容易实现</text>
                <view class="push-form_item__upload">
                    <view class="upload-item">
                        <img :src="url.picPath" alt="" v-for="url in wishInput.imgList" :key="url">
                    </view>
                    <view class="upload-item default" @click="upload">
                    </view>
                </view>
            </view>

            <Button @click="toPush">
                <text>立即发布</text>
            </Button>

            <checkbox-group class="checkbox-box">
                <label class="checkbox-text">
                    <checkbox value="cb" checked="true" />
                    <text>发布信息即同意本《公司协议》及《税务协议》</text>
                </label>
            </checkbox-group>
        </view>
    </InterceptContainer>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, onUnmounted } from 'vue';
import InterceptContainer from '@/components/InterceptContainer/InterceptContainer.vue';
import Button from '@/components/Button.vue'
import api from '@/apis/api';
import { showLoading, showToast } from '@/utils/prompt';
import { uploadImage  } from '@/utils/uploadResToCos'
let index = ref(0);
const classes = ref([])
const wishInput = reactive({
    wishClass: null,
    inputReasonContent: null,
    inputMoneyContent: null,
    inputNameContent: null,
    imgList: [],
    imgPath: []

})
function bindPickerChange(e: any) {
    console.log(e,"e====================")
    console.log(classes.value[e.detail.value],"classes.value[e.detail.value]====================")
    wishInput.wishClass =classes.value[e.detail.value].id
    console.log( wishInput.wishClass," wishInput.wishClass====================")
    index=e.detail.value
}
function toPush() {
    let msg = ''
    if (!wishInput.inputNameContent) msg = '请填写许愿标题'
    else if (!wishInput.inputMoneyContent) msg = '请填写许愿金额'
    else if (!wishInput.inputReasonContent) msg = '请填写许愿详情'
    else if (!wishInput.imgList ||wishInput.imgList.length==0) msg = '请上传图片'

    if (msg) return showToast(msg)
    console.log("wishInput.imgList  ===",wishInput.imgList)

    showLoading('发布中...')
    console.log(wishInput,"wishInput-------------")
    api.addWish(wishInput).then((data) => {
        wishInput.wishClass = null;
        wishInput.inputReasonContent = null;
        wishInput.inputMoneyContent = null;
        wishInput.inputNameContent = null;
        wishInput.imgList = [],
        wishInput.imgPath = []
        uni.switchTab({ url: '/pages/home/index' })
    }).finally(() => {
        uni.hideLoading()
    })
}

function upload() {
    uni.chooseImage({
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'],
        count: 3,
        success: res => {
            if (res.tempFiles.length > 0) {
                //console.log(res.tempFiles,"res.tempFiles")
                //todo 上传完显示图片
                const data=uploadImage(res.tempFiles).then(data => {
                    console.log(data,"上传完的 ====================================")
                    let paths ={
                        picPath:"https://"+data
                    }
                    wishInput.imgList = wishInput.imgList.concat(paths)
                    console.log(wishInput.imgList,"wishInput.imgList===================================")
                })
            }
        },
    })
}

function hidebar() {
	let bar = document.querySelector('.uni-tabbar-bottom');
	bar.style.display = 'none'
}

function showbar() {
	let bar = document.querySelector('.uni-tabbar-bottom');
	bar.style.display = 'block'
}

onMounted(() => {
    api.getWishClass().then(({ data }) => {
        classes.value = data.map((value: any) => ({ id: value.id, name: value.className }))
        console.log(classes,"classes=========")
        wishInput.wishClass = classes.value[0].id
    })
    index=0
})

uni.onWindowResize((res) => {
	 if(res.size.windowHeight > 600){
			showbar()
	 }
})



</script>

<style lang="scss" scoped>
page {
    background: #f2f2f2;
}

.header-bg {
    width: 100%;
    margin-bottom: -340rpx;
}

.push-form {
    margin: 0 30rpx;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    border-bottom-left-radius: 30rpx;
    border-bottom-right-radius: 30rpx;
    padding: 30rpx;
    background: #fff;
    position: relative;
    padding-bottom: 20rpx;

    .push-form_item {
        margin-bottom: 40rpx;

        &:last-child {
            margin-bottom: 0;
        }

        .push-form_item__upload {
            margin-top: 24rpx;
            display: flex;

            .upload-item {
                margin-right: 22rpx;

                &:last-child {
                    margin-right: 0;
                }

                img {
                    width: 140rpx;
                    border-radius: 16rpx;
                    height: 140rpx;
                }
            }

            .default {
                width: 140rpx;
                border-radius: 16rpx;
                height: 140rpx;
                background: #f2f2f2;
                position: relative;

                &:after {
                    content: '';
                    width: 40rpx;
                    height: 40rpx;
                    display: inline-block;
                    background-image: url('@/assets/images/upload_add.png');
                    background-size: cover;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }

    .push-form_item__name {
        font-size: 28rpx;
        color: #333;
        font-family: PingFang SC Bold;
    }

    .push-form_item__des {
        color: #999999;
        font-size: 20rpx;
        margin-left: 14rpx;
    }

    .area {
        height: 200rpx;
    }

    .push-form_item__box {
        background: #F9F9F9;
        height: 80rpx;
        line-height: 80rpx;
        padding-left: 12rpx;
        font-size: 24rpx;
        border-radius: 16rpx;
        position: relative;
        margin-top: 8rpx;

        .default {
            color: #CFCFCF;
        }


        .push-form_item__box-down {
            width: 20rpx;
            height: 20rpx;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translate(0, -50%);
        }
    }

    .checkbox-box {
        display: block;
        margin-top: 20rpx;
    }

    .checkbox-text {
        color: #C4C4C4;
        font-size: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>